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Abstract. Hydrological processes are dynamic, highly interlinked and have 
to be examined on various time and spatial scales. Precipitation constitutes 
the main input into the hydrological system and largely determines runoff 
disposition and runoff amounts in a given catchment area. I n order to bet- 
ter evaluate and reanalyze extreme precipitation, novel data processing and 
animated visualization methods are presented which are based on interpo- 
lated ground measuring precipitation gauges. 

Graphical rendering of animations is associated with high computational 
costs and memory consumption. To overcome these limitations and instead 
of using rather static movies, we propose to delegate animated interpola- 
tions to the client-side graphical processing unit (GPU). GPUs are able to 
instantaneously interpolate large sets of scattered point data. I nterpolated 
surfaces can then be visualized by classifying, color-coding and shading. 
Even the handling of large time series with hundreds or thousands of data 
points is possible. Using the Web Graphics Li brary (WebGL) as a client- side 
technology, animations can efficiently be distributed over the I nternet and 
also offer user interactions. After discussing the needs in hydrology, the 
GPU-based technology is introduced and a use case in hydrology is present- 
ed. 
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1. Data Processing in Hydrology 

1.1. State-of-the-art in hydrological data processing 

Hydrological time series data are needed to quantify a wide range of inter- 
linked processes and phenomena in the water cycle. Understanding these 



requires high-quality hydrological data and modeling. Latter is usually da- 
ta-intensive and the overall quality is strongly dependent on data availabil- 
ity and resolution. With the fast-paced advancement of Web- based and oth- 
er technologies in hydrology, possibilities for new research fields and prac- 
tice-oriented applications have widened remarkably. Technologies in data 
measurement engineering, transmission devices, data model standardiza- 
tion, data management tools, publication and visualization services are be- 
ing improved at a staggering speed. But not only have amounts and tem- 
poral resolutions of collected data risen tremendously, so have data format 
heterogeneity and vocabularies. In contrast, user expectations to high- 
quality and timely hydrological data products and model outputs have ris- 
en, which are met by employing larger data processing infrastructures and 
novel (semi-) automated processing algorithms (Aquatic 2012, Solomatine 
& Wagner 2011, Lecca et al. 2011). 

Data interoperability for real-time data exchange and merging between 
various organizations still pose significant challenges, mainly because of 
inherent semantic and structural heterogeneities of unprecedented 
amounts of data and non-uniform autonomous data sources (Ravindran et 
al. 2010). Various research initiatives in the hydrology domain have tackled 
this problem, resulting in attempts to create standardized markup lan- 
guages, such as HydroML, or graphical user interfaces such as HydroSeek 
(Beran &Piasecki 2009, Horsburgh etal. 2009). 

Hydrological databases - like many other environmental databases - are 
nowadays usually linked to GIS in order to better capture, manage, analyze 
and visualize data. GIS may be coupled more or less tightly to the hydrolog- 
ical model procedures or may assist users in the interpretation of model 
results (WMO 2011). Database design is a combination of various elements 
such as existing systems and data and user needs. Usability of the modeling 
and visualization tools is directly associated with the user acceptance, as 
users generally don't intend to deal with technicalities and underlying logi- 
cal processes related to the database (Al-Sabhan etal. 2003, Hughes & For- 
syth 2006, Lienertetal. 2011). 

1.2. Available Data 

In this paper, the discussion on available data is focused on precipitation 
data products. Data such asstreamflow, water level, groundwater, evapora- 
tion, soil moisture or any other data related to hydrology is omitted. For the 
present study, 10 minutes precipitation data has been used from over 70 
automated ground gauges of Swiss Federal Office for Meteorology and Cli- 
matology (Fig. 1). The precipitation data is collected on the ground with 



different types of perennial, static or seasonal, temporal sensors. Data is 
transmitted every 10 minutes with additional real-time quality checks. 




Figure L Overview of used precipitation data. The raindrops locate the automatic 
real-time ground gauging stations in Switzerland used for this study. 



1.3. Point measurements vs. area-covering precipitation radar 

Precipitation is characterized by its intermittency, high spatial and tem- 
poral variability, and sensitivity to environmental conditions such as wind. 
Precipitation is therefore- even today- quite difficult to measure accurately. 
M ost commonly, poi nt measurements are carri ed out usi ng can-type gauges 
(tipping- buckets or weighing system) with a collecting area ranging from 
125- 500 cm 2 (Savi na et al . 2012, Sevruk et al . 2009) . 

Besides being collected on the ground, precipitation is also qualitatively and 
quantitatively measured by precipitation radars. The strength of the radar 
is- still- that it captures well the spatial extent of entire precipitation cells, 
but less so the quantities, due to technical limitations in rain-rate conver- 
sions (cloud cover, ground clutter). Also, complex topography generally 
impedes accuracy, due to shielding effects (J oss & Waldvogel 1990, Pan- 
ziera et al. 2011). Ground gauges are nowadays used for calibration of, and 
combination with, these radar measurements to eventually enhance the 
quality of real-time precipitation data products in terms of accuracy, tem- 
poral and spatial resolution (Wueest et al. 2010, Abdella & Alfredsen 2010). 



Methodological frameworks for real-time combination of radar and gauges 
encompass objective analysis, interpolation with deterministic weights, and 
geostati sties, particularly the stochastic interpolation method Kriging (Er- 
din et al. 2012, Haberlandt 2007). 

1.4. Intended purpose of precipitation data 

Access to real-time precipitation data is especially important in order to 
encounter problems related to flood management, early warning, crisis 
management, environmental monitoring, or any other kind of ad-hoc deci- 
sion-making (Matthiesetal. 2007). Online, Web-based real -time data from 
sensors and precipitation radar are needed to centrally revaluate on-going 
current conditions. They help identify trends related other available meas- 
urement data, assess antecedent soil moisture conditions, and estimate 
possible response times of precipitation to produce superficial runoff within 
catchments (Kornelsen & Coulibaly 2013, Nikolopoulos et al. 2011, Zeheet 
al.2005). 

After flood events, reanalysis of the precipitation situations are needed by 
authorities and other stakeholders (Lienert et al. 2010). Compiling post- 
flood reports are usually costly, and data processing for visualization are 
time-consuming. In contrast, such information is often needed by crisis 
managements for communication purposes, during or shortly after the 
flood event. Thus, beside data quality, access to processed data plays anoth- 
er crucial role. 

1.5. The importance of spatial interpolation 

Spatial interpolation allow for quantifying area-covering precipitation 
amounts over a given time period and spatial unit, e.g. a catchment. Most 
physically or semi -physically based rainfall -runoff models require these 
spatially distributed quantities as input. Interpolation quality strongly de- 
pends on the location of the ground gauge as it has to be representative for 
the surrounding, unmeasured area. The representativeness of a gauge de- 
pends on topography, the climatological region and altitudinal belt 
(Grebner & Roesch 1998). 

Interpolation involves weighted measured values from reference gauges, 
which surround the interpolated point. The main difference between cur- 
rent interpolation methods is how the weights are determined. The weights 
may be deduced from a) geometric- deterministic, e.g., nearest neighbors, 
arithmetic mean, inverse distance weighting, or b) statistical methods, e.g., 
kriging (Creutin & Obled 1982, Lebel et al. 1987). Compared to geometric 
methods, statistical interpolations are more complex, but do not necessarily 
lead to better results (Grebner & Roesch 1998, p.49 ff). Therefore, in this 



paper, the geometric inverse distance weighting interpolation method is 
used for animated visualization (see Chapter 3). 

1.6. The need for temporal animation 

Spatially referenced visualization is key when evaluating, analyzing, under- 
standing and communicating hydrological flood events, complementing 
non-spatial information such as tables and graphs. The term animation is 
used when several maps, representing a point in time, are temporally or- 
dered, put in sequence and visualized- preferably without jolting (Ogao & 
Kraak 2002). Concise visualizations, particularly animations, are needed to 
address technical personal in crisis management teams who are usually 
under time pressure. But also non-technical stakeholders, such as journal- 
ists or rescue service- men may be much better addressed (Cutter 2003). 



2. WebGL: OpenGL for Browsers 

WebGL is a new standard for the well-established technology OpenGL 
(WebGL 2011). It brings the computing power of the graphics processing 
unit (GPU) to the Web browser by providing a JavaScript interface to 
OpenGL. WebGL is based on OpenGL for Embedded Systems (OpenGL ES 
2010) and can be considered as a subset of OpenGL (since version 4.1). 

The introduction of the OpenGL Shading Language (GLSL) starting with 
OpenGL version 2.0 in 2004 detached the processor from graphics-only 
tasks and opened it for general "General-Purpose Computing on the GPU" 
(Owens et al. 2007). WebGL and OpenGL ES did not only include GLSL in 
their implementation, but made its use even mandatory (OpenGL ES Shad- 
ing Language 2009). WebGL programming involves a) the J avaScript pro- 
gramming interface which is responsible for the communication between 
the browser and the GPU, and b) GLSL interface which controls processes 
running enti rely on the GPU. 

When turning graphics data into image representations, the GPU follows a 
structured way of passing and processing data, denoted as the graphics 
pipeline (Owens et al. 2008). It is basically split into a modeling step, pro- 
cessing the data for the following rendering step. Essentially, there are two 
nodes in the graphics pipeline (see Fig. 2) where specialized programs can 
intervene: 1) where vertices are processed and 2) where pixels are assem- 
bled. This is where the Shading Language comes into play. The program- 
mable units written in GLSL are also called shaders. 
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Figure 2. Schematic diagram of the OpenGL ES graphics system (WebGL 2011, 
slightly modified). 

The GPU provides a data interface for vector and raster data, and compiled 
shader programs. As shown i n Fi g. 2, the verti ces of the vector data are fi rst 
processed by the vertex shader, assembled to graphics primitives, which are 
then rasterized. Raster data follows a different path, being first transformed 
to textures (a mapping-optimized raster format). Rasterized textures are 
then passed to the fragment program, which determines the color value of 
each pixel. The frame buffer finally stores all resulting pixels and is either 
connected to system window in order to display its content, served as a 
source for further textures, or is passed back to the host program. 

WebGL does not only offer a way to free the CPU from computational task, 
it is also able to accelerate this process, potentially by an order of magni- 
tude. This is made possible by the parallel computation design of the GPU. 
The GPU is a collection of many small processors running in parallel (Single 
I nstruction - M ulti pie Data SI M D approach, see Owens et al. 2007). 

Although the WebGL standard has only been released in 2011, WebGL is 
implemented in the major browsers and is ready to be used without extra 
installation. However, some features and most mobile browsers are not 
(yet) supported. Still in its infancy, a new standard is emerging called Web 
Computing Language (WebCL). It abstracts from the graphically motivated 
computation model and provides a more generic interface for parallel com- 
puting (WebCL Working Draft 2013). 



3. Interpolation, Animation and Visualization Using 
WebGL 

As mentioned above, the focus is on the inverse distance weighting interpo- 
lation method (I DW), which dates back to Shepard (1968). I DW is easy to 
implement, but is a computationally intensive interpolation method, as it 
operates on the entire (global) data set where every single data point iscon- 
tributing to the interpolated value. The IDW method has drawn attention 



just recently, as it is ideally suited for fast parallel execution (Hennebohl et 
al. 2011, Srinivasan etal. 2010). 

Although OpenGL (and WebGL) is primarily known for astonishing 3D 
graphics, it may likewise be used efficiently for computation- intensive 2D 
raster task such as spatial interpolation. For this study, IDW was imple- 
mented with WebGL since it is installed on major browsers and therefore 
enables spatial interpolation in Web applications. In order to ensure that 
the graphical user interface remains responsive and that animations are 
smooth, most of the computational workload is left to the graphics proces- 
sor and the necessary data are transferred to the graphics memory. Two 
techniques have been considered, both having their pros and cons. 

The first technique uses multiple rendering passes, one for each data point 
that contributes to the final interpolation. Starting with an empty frame- 
buffer, weighted values as well as the weights are added and written to a 
second framebuffer using two color channels. The framebuffers are then 
exchanged and the procedure is repeated until all data points have been 
processed. An additional rendering pass is then required to adjust the in- 
terpolated values to the sum of weights equal to one. Si nee this method con- 
tinuously exchanges data between two framebuffers, it is called ping-pong 
technique(G6ddeke 2007). 

The second technique tries to avoid the computational overhead introduced 
by the ping-pong technique. This requires transferring the previously CPU- 
based loop over all data points to the shader program. Unfortunately, 
shader programs are not allowed to have variable- si zed loops. As a conse- 
quence, switching to another data sets requires the recompilation of the 
shader programs. Given rather small shader programs and a relatively short 
compilation time, this restriction is more of an aesthetical nature. 

Interpolation and visualization parameters are transferred to the GPU by 
so-called uniform values, either as scalar values or small arrays. Point data 
sets may also be passed as arrays of uniform values but they are restricted 
to rather small sizes (the actual value depends on the graphics hardware or 
the graphics driver). To avoid this limitation, we considered packing the 
point data into textures and access them from the shader program by tex- 
ture look-up functions. Texture sizes are limited only by the maximum tex- 
ture size, which is much higher than the maximum size of uniform values. 
I n this case it is important to ensure that the WebGL implementation sup- 
ports the floating-point texture extension which otherwise would severely 
limit the precision of the interpolated values. Apart from that, textures are 
particularly interesting since they allow the simultaneous loading of data 
for all animation phases. Also, using textures enables data pre-processing 
del egati on to th e G P U , su ch as th e cal cu I ati on of r u n n i n g su ms. 



GPU-based computation does not necessarily end with number-crunching 
interpolation. To achieve optimal performance, it is meaningful to also run 
subsequent visualization steps on the GPU. In the presented implementa- 
tion, classification of the interpolated values and color-coding is packed 
into an additional rendering pass using texture look- up functions. By inter- 
preting interpolated values as texture coordinates, interpolated values can 
di recti y be mapped to col or val ues. To further i mprove the vi sual percepti on 
of the i nterpol ated surface, shadi ng si mi I ar to the one used for di gi tal el eva- 
tion models is applied. 

The very last rendering step involves the composite with a base map. In 
order to serve different map scales, a vector data map is used. It is raster- 
ized and converted to a texture only when the resolution of the map is 
known. The composite will involve image blending or multiplication, de- 
pendi ng on the needs. 
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Figure 3. Data flow and data processing for GPU-based spatial point data interpo- 
lation. 

Figure 3 schematically presents the data flow and the necessary stages of 
computations. It shows that all computation steps from the raw data to the 
final map are performed on the GPU. User interactions control the data and 
parameters to be used for interpolation, the classification, color schemes 
and shading to be applied and finally the composite of the resulting map 
image. 

Assuming that point data sets are available at regular but rather long time 
intervals, temporal interpolation becomes an issue, especially if smooth 
animations are desired. Given a continuous temporal interpolation func- 
tion, data values may be estimated for any point in time, within the availa- 
ble time period. For best performance and in order to keep each stage of 
data processing entirely on the GPU, theWebGL's built-in linear interpola- 
tion function is used. This requires the point data set to be packed into a 
texture. The interpolated values are then calculated on-the-fly for a given 
poi nt i n ti me. 
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Figure 4. Data layout for temporal interpolation. 

Figure 4 shows the data layout for the point data sets that is well suited for 
fast data access and linear interpolation along the time axis. The texture is 
organized so, that its coordinates refer to a specific data point, and a given 
point in time, respectively. The four components of every texture element 
are supposed to carry the data point's coordinates in the plane and the data 
value. The forth component is reserved as an additional value, such as a 
running sum for a given interval. Data point coordinates are stored redun- 
dantly on purpose. Enabling WebGL's linear interpolation option along the 
time axis, a single texture access function call is able to retrieve the data 
poi nt's coordi nates and the i nterpol ated val ue si multaneously. 

Given a maximum texture size of typically 8192 by 8192 texture elements, 
more than 8000 measurements may be interpolated for more than 8000 
points in time. Thus, measurements at eg. hourly intervals may be interpo- 
lated and animated over a period of nearly up to a year. The frame rate 
mainly depends on the number of stations and the image size of the final 
map. On modern laptops, smooth animation for the interpolation of around 
100 data points and an image size of about one megapixels were achieved. 



4. Prototype System for Hydrologic Applications 

A prototype system for animated visualization of interpolated point data 
sets is shown in Fig. 5. The map shows a frame from a flood event in Swit- 
zerland of August 2005, based on 24 hours sums over 10 minutes meas- 
urement intervals. The user interface is realized with Ext J S, panels are 
resizabl e and the si i der f it the wi ndow size. 

The left si de panel is used to choose the data set for the ani mati on. The bot- 
tom panel contains the interface elements, which control interpolation and 
animation. 



A Time slider is used to choose the measurements at a specific point in 
time. In order to able to access all measurements, the width of the slider 
should be larger than the number of measurements. 




Figure 5. Prototype system for the animated visualization of interpolated point 
data sets, showing the graphical user interface and resulting map. 

An exponent is applied to the inverse distance when interpolating the data 
values. Small values tend to narrow, larger values tend to widen the region 
of influence. 

A shading slider controls the percentage the shading of the calculated sur- 
face contri butes to the map. A val ue of zero avoi ds surface shadi ng. 

A zoom slider control s the seal e of the map. 

A speed slider most efficiently controls the animation. It determines the 
time elapsed between two consecutive animation frames. Linear time inter- 
polation is applied to all data measurements. Negative speed values ani- 
mate backward i n ti me. 

Ani mati on control buttons are used to j ump to the f i rst measurement of the 
period, to start animation backward in time, to move one step to the previ- 
ous measurement, to stop running animation, to start animation forward in 
time, to move one step to the next measurement and to jump to the last 
measu rementoftheperiod. 



5. Discussion of Results, Conclusions and Outlook 

We have been abl e to show that WebGL al I ows to i nterpol ati ng and smooth- 
ly animating large time- series of data measurements for hundred and more 
gauging stations. Without further installations, a modern Web browser will 
be sufficient to dynamically visualize raw measurement data. WebGL is 
accelerating data interpolation by a factor of 100 to 500, compared to an 
implementation written in J avaScript. 

The presented prototype may serve as a valuable tool for visually inspect- 
ing, controlling, and analyzing large time series of point measurements. It 
will enable users to efficiently discover spatial patterns, retrace flood 
events, understand hydrological processes, particularly in retrospect, and 
communicate to involved stakeholders in early warning and crisis manage- 
ment. 

A number of potentially useful features have not yet found its way in the 
prototype implementation. We assume that the GPU-based calculation is 
not expected to raise particular difficulties for tasks such as 

• The calculation of running sums for arbitrary time intervals 

• The estimation and overlapping of precipitation amounts over a giv- 
en catchment area 

• The inclusion of additional precipitation interpolation improve- 
ments (e. g. including digital elevation models) 

Temporally animated interpolations will not be restricted to hydrology and 
precipitation visualization. Other environmental data from point measure- 
ments wi 1 1 potenti al I y be suited for a si mi I ar processi ng. 
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